<template>
    <!-- 复选框：选项设置 -->
    <div class="form-group">
        <label>选项设置</label>

        <div class="line line-ck">
            <i class="iconfont icon-yincang"></i>
            <span class="input-checkbox">
                <input type="checkbox"> <i class="iconfont icon-square"></i></span>
            <input class="input-text" type="text"/>
            <i class="iconfont  icon-addition_fill"></i>
            <i class="iconfont icon-offline_fill"></i>
            <i class="iconfont icon-stealth_fill"></i>
        </div>
        <div class="line line-ck">
            <i class="iconfont icon-yincang"></i>
            <span class="input-checkbox"><input type="checkbox"> <i class="iconfont icon-square"></i></span>
            <input class="input-text" type="text"/>
            <i class="iconfont  icon-addition_fill"></i>
            <i class="iconfont icon-offline_fill"></i>
            <i class="iconfont icon-stealth_fill"></i>
        </div>
        <div class="line line-ck">
            <i class="iconfont icon-yincang close"></i>
            <span class="input-checkbox"><input type="checkbox"> <i class="iconfont icon-square"></i></span>
            <input class="input-text" type="text"/>
            <i class="iconfont  icon-addition_fill"></i>
            <i class="iconfont icon-offline_fill"></i>
            <i class="iconfont icon-stealth_fill"></i>
        </div>

        <div class="form-sections clearfix">
            <section class="form-section">
                <a class="section-link" href="javascript:;" title="">添加其他</a>
            </section>
            <span class="split">|</span>
            <section class="form-section">
                <a class="section-link" href="javascript:;" title="">选项名额</a>

                <div class="section-main">
                    <header>
                        <h3>选项名额</h3>
                        <a class="close" href="javascript:;" title=""></a>
                    </header>
                    <div>
                        <p class="tip">您可以为每个选项设置名额，每次有人选择就会占用一个明儿，
                            直至明儿用完。同时你也可以自定义名额用完之后的文案提示。</p>
                        <table class="form-block on">
                            <thead>
                            <tr>
                                <th width="65%">选项</th>
                                <th width="35%">名额</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <input class="input-text" type="text" name="" placeholder="选项1">
                                </td>
                                <td>
                                    <input class="input-text" type="text" name="">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input class="input-text" type="text" name="" placeholder="选项2">
                                </td>
                                <td>
                                    <input class="input-text" type="text" name="">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input class="input-text" type="text" name="" placeholder="选项3">
                                </td>
                                <td>
                                    <input class="input-text" type="text" name="">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input class="input-text" type="text" name="" placeholder="其他">
                                </td>
                                <td>
                                    <input class="input-text" type="text" name="">
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <p class="tip">
                            名额为0的文案（仅限20个字符）
                        </p>
                        <input class="input-text" type="text" name="">
                    </div>
                    <footer class="tar">
                        <a class="com-btn btn-gray" href="javascript:;" title="">取消</a>
                        <a class="com-btn btn-warn" href="javascript:;" title="">保存</a>
                    </footer>
                </div>
            </section>
            <span class="split">|</span>
            <section class="form-section">
                <a class="section-link" href="javascript:;" title="">选项模板</a>

                <div class="section-main">
                    <header>
                        <h3>选项模板</h3>
                        <a class="close" href="javascript:;" title=""></a>
                    </header>
                    <div>
                        <p class="tip">您可以通过模板迅速获取常用的选项</p>

                        <div class="clearfix">
                            <div class="form-cascader">
                                <a class="on" href="javascript:;" title="">是否</a>
                                <a href="javascript:;" title="">星期</a>
                                <a href="javascript:;" title="">是否是否是否是否是否是否是否是否是否</a>
                            </div>
                            <div class="form-cascader">
                                <a href="javascript:;" title="">是</a>
                                <a href="javascript:;" title="">否</a>
                            </div>
                        </div>
                    </div>
                    <footer class="tar">
                        <a class="com-btn btn-gray" href="javascript:;" title="">取消</a>
                        <a class="com-btn btn-warn" href="javascript:;" title="">保存</a>
                    </footer>
                </div>
            </section>
            <span class="split">|</span>
            <section class="form-section">
                <a class="section-link" href="javascript:;" title="">批量编辑</a>

                <div class="section-main">
                    <header>
                        <h3>批量编辑</h3>
                        <a class="close" href="javascript:;" title=""></a>
                    </header>
                    <div>
                        <p class="tip">每个选项请单列一行，单个选项长度不能超过1000个字</p>

                        <div class="cnt">
                            <div class="input-texts">
                                <input class="input-text" type="text" name="" placeholder="选项1">
                                <input class="input-text" type="text" name="" placeholder="选项2">
                                <input class="input-text" type="text" name="" placeholder="选项3">
                            </div>
                        </div>
                    </div>
                    <footer class="tar">
                        <a class="com-btn btn-gray" href="javascript:;" title="">取消</a>
                        <a class="com-btn btn-warn" href="javascript:;" title="">保存</a>
                    </footer>
                </div>
            </section>


            <!--<a href="javascript:;" title="">选项名额</a>-->
            <!--<span class="split">|</span>-->
            <!--<a href="javascript:;" title="">选项模板</a>-->
            <!--<span class="split">|</span>-->
            <!--<a href="javascript:;" title="">批量编辑</a>-->
        </div>
    </div>
</template>
